<template>
  <div id="app">
    <h2>{{ msg }}</h2>
    <img style="width:200px;" src="./assets/logo2.png">
    <h3>{{ this.$store.state.city_name }}</h3>
    <h4>{{ this.$store.state.area_name }}</h4>
    <p>{{ this.currentCity }}</p>
    <p>{{ this.currentArea }}</p>
    <input type="text" placeholder="改变城市的名字" ref="city_input"/>
    <button @click="handleCityClick()">通过Actions中dispatch提交</button>
    <button @click="handleCityClick2()">通过Mutations中Commit提交</button>
    <h5>{{ this.nameText }}</h5>
    <h5>{{ this.nameTextA }}</h5>
    <router-view/>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'App',
  data () {
    return {
      msg: '学习如何使用Vuex'
    }
  },
  computed: {
    ...mapState({
      currentCity: 'city_name',
      currentArea: 'area_name',
      nameText: state => state.moduleB.text,
      nameTextA: state => state.moduleA.text,
    })
  },
  methods: {
    ...mapMutations(['changeCity', 'setText', 'setTextA']),
    handleCityClick() {
      // console.log(this.$refs.city_input.value)
      let cityName = this.$refs.city_input.value;
      if (cityName.length <=0) {
        alert('城市名不能为空！！！')
        return;
      }
      // this.$store.dispatch('changeCity', cityName)
      this.changeCity(cityName);
    },
    handleCityClick2() {
      let cityName = this.$refs.city_input.value;
      if (cityName.length <=0) {
        alert('城市名不能为空！！！')
        return;
      }
      // this.$store.commit('changeCity', cityName);
      this.changeCity(cityName);
      this.setText('城市B');
      this.setTextA('城市A');
    }
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
